<template>
  <div class="myinport">
    <h2>批量导入</h2>
    <myexcel :beforeUpload="beforeUpload" :onSuccess="onSuccess"></myexcel>
  </div>
</template>

<script>
//导入批量员工接口
import { getUserApi } from '@/api/employees'
export default {
  methods: {
    // 上传之前的逻辑
    beforeUpload (file) {
      // 判断文件的大小是否小于 2M
      // 文件的大小转换单位：
      //  b kb mb gb tb
      // 1024b = 1kb 1024kb = 1mb 1024mb = 1gb 1024gb = 1tb
      const less2M = file.size < 2 * 1024 * 1024
      if (!less2M) {
        this.$message.error('文件大小不过超过 2M')
      }
      return less2M
    },
    //转换时间格式
    //将日期从天转换为具体的日期格式
    formDate (days) {
      //得到天对应的时间戳
      const mytime = (days - 1) * 24 * 60 * 60 * 1000
      //根据时间戳得到具体的日期
      const mydate = new Date(mytime)
      //将日期减去70年
      mydate.setFullYear(mydate.getFullYear() - 70)
      return mydate
    },

    // 成功后的回调函数
    async onSuccess ({ header, results }) {
      console.log(results)
      //将数据的中文属性更改为英文属性
      const obj = {
        入职日期: 'timeOfEntry',
        姓名: 'username',
        工号: 'workNumber',
        手机号: 'mobile',
        转正日期: 'correctionTime'
      }
      //得到中文属性对象的英文属性
      const newArr = results.map(item => {
        //创建一个对象
        const newObj = {}
        //遍历键 Object.keys(obj) => ['入职日期','姓名','工号','手机号','转正日期']
        Object.keys(obj).forEach(subitem => {
            // 判断当前数据是否是时间，如果是时间，将时间进行转换
          if (subitem == '入职日期' || subitem == '转正日期') {
            newObj[obj[subitem]] = this.formDate(item[subitem])
          } else {
            newObj[obj[subitem]] = item[subitem]
          }
        })
        //subitem 对应是 ['入职日期','姓名','工号','手机号','转正日期'] 中的每个元素
        //obj[subitem] 对应是 timeOfEntry & username & workNumber & mobile & correctionTime
        return newObj
      })
      console.log(newArr);

      //将得到的数据提交到服务器
      await getUserApi(newArr)
      //提示成功
      this.$message.success('批量导入成功')
      //跳转到员工页面
      this.$router.push('/employees')
    }
  }
}
</script>

<style lang="scss">
.myinport {
  text-align: center;
  margin-top: 200px;
}
</style>
